import { Creator } from "./creator";
import { TabEvent } from "./event";
import type { EaseTabs } from "../index";
import type { ITab } from "../../types/index";

export class RenderTab {
    eTabs: EaseTabs;
    creator: Creator;
    tabEvent: TabEvent;
    focusId: undefined | string;
    preId: undefined | string;
    removeId: undefined | string;
    tabMap:  Map<string, ITab> = new Map();
    constructor(eTabs: EaseTabs){
        this.eTabs = eTabs;
        this.creator = new Creator(eTabs);
        this.tabEvent = new TabEvent(eTabs);
        this.__init();
    }

    private __init() {
        const tabWrap = this.creator.getTabWrap();
        this.eTabs.container.appendChild(tabWrap);
    }

    init(initTabs){
        initTabs.forEach((q, i) => {
            this.tabMap.set(q.id, q);
            if (i == 0) {
                const tab = this.creator.getTab(q, true, i);
                this.creator.tabWrap!.appendChild(tab);
                return;
            }
            const tab = this.creator.getTab(q);
            this.creator.tabWrap!.appendChild(tab);
        });
        this.creator.init();
    }

    addTab(tab: ITab){
        this.tabMap.set(tab.id as string, tab);
        this.creator.add(tab);
    }

    async toRemoveTab(removeIndex: number){
        const { tab, index: focusIndex } = this.findFocusIndex();
        let focusTab = tab;
        this.focusId = tab.getAttribute("data-index") as string;
        const removeTab = this.creator.findLi(removeIndex);
        this.removeId = removeTab.getAttribute("data-index") as string;
        await this.creator.remove(removeIndex);
        if (removeIndex == focusIndex) {
            focusTab = this.creator.setFocus(0) as HTMLLIElement;
            this.focusId = focusTab.getAttribute("data-index") as string;
        }
        return {
            focusTab: this.tabMap.get(this.focusId) as ITab,
            removeTab: this.tabMap.get(this.removeId) as ITab,
        }
    }

    async changeFocus(index: number){
        const { tab } = this.findFocusIndex();
        this.preId = tab.getAttribute("data-index") as string;
        const targetTab = this.creator.findLi(index);
        this.focusId = targetTab.getAttribute("data-index") as string;
        if (this.preId == this.focusId) {
            return;
        }
        this.creator.changeFocus(index);
        return {
            focusTab: this.tabMap.get(this.focusId) as ITab,
            preTab: this.tabMap.get(this.preId) as ITab,
        }
    }

    findFocusIndex() {
        return this.creator.findFocus();
    }

    eventBind(){
        this.tabEvent.registerMouseClick(this.creator.tabWrap!, async (target: any) => {
            const index = this.creator.findFocusIndexFromDom(target);
            await this.eTabs.change(index!);
        }, (target: any) => {
            const index = this.creator.findFocusIndexFromDom(target);
            this.eTabs.remove(index!);
        });

        this.tabEvent.registerDrag(this.creator.tabWrap!);

        this.tabEvent.registerCopy(this.creator.tabWrap!);
    }
}